<template>
	<view class="container">
		<!-- 站点信息 -->
		<view class="rules-card">
			<view class="rules-header">
				<view class="rules-icon"></view>
				<text class="rules-title">{{ stationInfo.title }}信息</text>
			</view>
			<view class="rules-content">
				<text class="rules-text">{{alias}}</text>
				<p></p>
				<text class="rules-sub">该车桩下共有{{ allVehicles.length }}辆溜娃车，请选择一辆</text>
			</view>
		</view>

		<!-- 车辆选择区域 -->
		<view class="selection-card">
			<view class="selection-header">
				<text class="selection-title">请选择下方车辆</text>
			</view>

			<!-- 状态说明 -->
			<view class="legend-row">
				<view class="legend-item">
					<view class="legend-dot available"></view>
					<text class="legend-text">可用</text>
				</view>
				<view class="legend-item">
					<view class="legend-dot occupied"></view>
					<text class="legend-text">使用中</text>
				</view>
				<view class="legend-item">
					<view class="legend-dot selected"></view>
					<text class="legend-text">已选择</text>
				</view>
			</view>

			<!-- 车辆列表 - 移除滚动容器 -->
			<view class="vehicle-list">
				<view v-for="(item, index) in allVehicles" :key="index" class="vehicle-item" :class="{ 
						'vehicle-selected': selectedId === item.layout_id, 
						'vehicle-disabled': !item.available
					}" @click="selectVehicle(item)">
					<view class="vehicle-image">
						<image :src="item.img" mode="aspectFill"></image>
					</view>
					<view class="vehicle-info">
						<view class="vehicle-top-row">
							<text class="vehicle-name">{{ item.alias }}</text>
							<text class="vehicle-status"
								:class="item.available ? 'status-available' : 'status-unavailable'">
								{{ item.available ? '可用' : '使用中' }}
							</text>
						</view>
					</view>
					<view class="check-icon" v-if="selectedId === item.layout_id">
						<uni-icons type="checkmarkempty"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部确认按钮 -->
		<view class="bottom-action">
			<button class="confirm-btn" :class="{ 'disabled': selectedId === null }" :disabled="selectedId === null"
				@click="confirmSelection">
				{{ selectedId !== null ? '确认选择' : '请选择溜娃车' }}
			</button>
		</view>
	</view>
</template>

<script>
	import {
		API_CONFIG
	} from '../../config/constants';
	export default {
		data() {
			return {
				stationId: '',
				pileIdx: "",
				stationInfo: {
					id: "",
					title: '测试站点',
					address: ''
				},
				selectedId: null,
				loading: true,
				// 预设的5辆车数据
				defaultVehicles: [{
						layout_id: 1,
						alias: '溜娃车001',
						img: '/static/images/vehicle-default.png',
						num: '1',
						pile_idx: 1,
						available: false
					},
					{
						layout_id: 2,
						alias: '溜娃车002',
						img: '/static/images/vehicle-default.png',
						num: '2',
						pile_idx: 2,
						available: false
					},
					{
						layout_id: 3,
						alias: '溜娃车003',
						img: '/static/images/vehicle-default.png',
						num: '3',
						pile_idx: 3,
						available: false
					},
					{
						layout_id: 4,
						alias: '溜娃车004',
						img: '/static/images/vehicle-default.png',
						num: '4',
						pile_idx: 4,
						available: false
					},
					{
						layout_id: 5,
						alias: '溜娃车005',
						img: '/static/images/vehicle-default.png',
						num: '5',
						pile_idx: 5,
						available: false
					}
				],
				allVehicles: [],
				alias: ""
			}
		},
		computed: {
			selectedVehicle() {
				return this.allVehicles.find(v => v.layout_id === this.selectedId);
			}
		},
		onLoad(option) {
			// 获取路由传参
			if (option) {
				this.stationId = option.station_id;
				this.pileIdx = option.pile_idx;
			}
			this.fetchStationVehicles(this.stationId, this.pileIdx);
		},
		methods: {
			// 获取站点车辆信息
			fetchStationVehicles(stationId, pileIdx) {
				// 初始化所有车辆为默认数据
				this.allVehicles = JSON.parse(JSON.stringify(this.defaultVehicles));
				uni.request({
					url: API_CONFIG.baseUrl + "/babyCar.StationLayout/list?station_id=" + stationId +
						"&pile_idx=" + pileIdx,
					method: "GET",
					success: (res) => {
						if (res.data.data && res.data.data.length > 0) {
							// 获取站点信息
							if (res.data.data[0].station) {
								this.stationInfo = res.data.data[0].station;
								this.alias = res.data.data[0].alias
							}
							
							// 创建可用车辆的编号映射
							const availableVehicleMap = {};
							res.data.data.forEach(item => {
								availableVehicleMap[item.num] = item;
							});
							this.allVehicles = this.allVehicles.map(vehicle => {
								if (availableVehicleMap[vehicle.num]) {
									const apiVehicle = availableVehicleMap[vehicle.num];
									const isAvailable = apiVehicle.wheel_hw_code != null && apiVehicle.wheel_hw_code !== '';

									return {
										...vehicle,
										layout_id: apiVehicle.layout_id,
										pile_hw_code: apiVehicle.pile_hw_code,
										wheel_hw_code: apiVehicle.wheel_hw_code,
										num: apiVehicle.num,
										pile_idx: apiVehicle.pile_idx,
										img: apiVehicle.img || vehicle.img,
										available: isAvailable
									};
								} else {
									return {
										...vehicle,
										available: false
									};
								}
							}).sort((a, b) => parseInt(a.num) - parseInt(b.num));
						}
					},
					fail: (err) => {
						console.error("获取站点信息异常:", err);
						uni.showToast({
							title: '获取车辆信息失败',
							icon: 'none'
						});
					}
				})
			},
			// 选择车辆
			selectVehicle(vehicle) {
				if (vehicle.available) {
					this.selectedId = vehicle.layout_id;
				} else {
					uni.showToast({
						title: '该溜娃车正在使用中',
						icon: 'none'
					});
				}
			},
			// 确认选择
			confirmSelection() {
				const selectedVehicle = this.allVehicles.find(v => v.layout_id === this.selectedId);
				if (selectedVehicle) {
					uni.navigateTo({
						url: "/pages/rent/rent?layout_id=" + this.selectedId + "&pile_hw_code=" + selectedVehicle
							.pile_hw_code + "&wheel_hw_code=" + selectedVehicle.wheel_hw_code + "&pile_idx=" +
							this.pileIdx + "&station_title=" + this.stationInfo.title + "&alias=" + this.alias +
							"&station_id=" + this.stationId + "&num=" + selectedVehicle.num
					})
				}
			},
			// 返回上一页
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	.container {
		background-color: #F8F8F8;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	/* 导航栏 - 美团黄色 */
	.nav-bar {
		display: flex;
		align-items: center;
		height: 88rpx;
		background-color: #FFD100;
		padding: 0 32rpx;
		color: #333333;
	}

	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: #333333;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
	}

	.placeholder {
		width: 60rpx;
	}

	/* 站点信息卡片 */
	.rules-card {
		margin: 20rpx 24rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	}

	.rules-header {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.rules-icon {
		width: 40rpx;
		height: 40rpx;
		background-color: #FFD100;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333333;
		font-size: 24rpx;
		margin-right: 16rpx;
	}

	.rules-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
	}

	.rules-content {
		padding-left: 56rpx;
	}

	.rules-text {
		font-size: 28rpx;
		color: #333333;
		line-height: 1.5;
		margin-bottom: 8rpx;
	}

	.rules-sub {
		font-size: 24rpx;
		color: #999999;
		line-height: 1.4;
	}

	/* 选择区域卡片 */
	.selection-card {
		margin: 20rpx 24rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	}

	.selection-header {
		text-align: center;
		margin-bottom: 32rpx;
	}

	.selection-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #FFFFFF;
		padding: 16rpx 32rpx;
		background-color: #FFD100;
		border-radius: 32rpx;
		display: inline-block;
	}

	/* 状态说明 */
	.legend-row {
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
		padding: 20rpx 0;
		background-color: #F8F8F8;
		border-radius: 12rpx;
	}

	.legend-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.legend-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
	}

	.legend-dot.available {
		background-color: #4CAF50;
	}

	.legend-dot.occupied {
		background-color: #CCCCCC;
	}

	.legend-dot.selected {
		background-color: #FFD100;
	}

	.legend-text {
		font-size: 24rpx;
		color: #666666;
	}

	/* 车辆列表 - 移除滚动限制 */
	.vehicle-list {
		/* 移除 max-height 确保无滚动条 */
	}

	.vehicle-item {
		display: flex;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 10rpx;
		margin-bottom: 20rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
		border: 2rpx solid transparent;
	}

	.vehicle-selected {
		border: 2rpx solid #FFD100;
		background-color: #FFF8E1;
	}

	.vehicle-disabled {
		opacity: 0.7;
		background-color: #F5F5F5;
	}

	.vehicle-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		overflow: hidden;
		margin-right: 20rpx;
		background-color: #f0f0f0;
	}

	.vehicle-image image {
		width: 100%;
		height: 100%;
	}

	.vehicle-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.vehicle-top-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.vehicle-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
	}

	.vehicle-status {
		font-size: 24rpx;
		padding: 8rpx 20rpx;
		border-radius: 100rpx;
		font-weight: 500;
	}

	.status-available {
		background-color: #E8F5E9;
		color: #4CAF50;
	}

	.status-unavailable {
		background-color: #F5F5F5;
		color: #999999;
	}

	.check-icon {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: #FFD100;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333333;
		font-size: 24rpx;
	}

	/* 底部按钮 */
	.bottom-action {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 24rpx 40rpx;
		background-color: #FFFFFF;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
	}

	.confirm-btn {
		width: 100%;
		height: 88rpx;
		background-color: #FFD100;
		color: #333333;
		border: none;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background-color 0.2s ease;
	}

	.confirm-btn.disabled {
		background-color: #CCCCCC;
		color: #999999;
	}
</style>